import React from 'react';
import '../component/search.css'




class SearchCom extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            value: '' ,
            result: ''
        }
        

    }
   
    render(){
        return(
            <div className='content'>
                <input className='inputclass'  type='text' placeholder='请输入查询的省份' onKeyDown={this.serchEvent} value={this.state.value} onChange={this.changeEvent}/>
                <div>
                    <h2 className='text'>查询结果: </h2>
                    <div className ='res'>
                        {this.state.result}
                    </div>
                </div>
            </div>
        )
    }
    serchEvent = (e)=>{
         //当keyCode是回车的时候再进行查询
         let proObj = this.props.provincesObj[e.target.value]
        if (e.keyCode === 13) {
            console.log(e.keyCode);
            console.log(e.target.value);
            // console.log(this.props);
            if (proObj === undefined) {
                this.setState({
                    result : (<h2>输出错误，不是省份。请输入正确的省份</h2>)
                }) 
            }else{

                this.setState({
                    result:(
                        <div>
                        <div>确诊人数:{proObj.confirm}</div>
                        <div>死亡人数:{proObj.dead}</div>
                        <div>治愈人数:{proObj.heal}</div>
                    </div>
                    )
                })

        
            }
           
        }

    }
    changeEvent= (e)=>{
        this.setState({
            value: e.target.value
        })

    }

}





export default SearchCom